<template>
	<view class="all-container">
		<view class="all-head" :style="{ paddingTop: barHeight + 'rpx' }">
			<image src="@/static/img/common/fh.png" mode="" @click="goto"></image>
			<view class="search-ipt" @click="search(2)">
				<image src="@/static/img/common/searc.png" mode=""></image>
				<text>搜索</text>
			</view>
		</view>
		<view class="head-bt">
			<view class="bt-nav">
				<view :class="navIndex === index ? 'nav-item nav-item-active' : 'nav-item'"
					v-for="(item, index) in data.navList" :key="index" @click="jumpNav(index)">{{ item.name }}</view>
			</view>
			<view class="bt-region" @click="open">
				<text>工作区域</text>
				<image src="@/static/img/common/xia.png" mode=""></image>
			</view>
		</view>
		<view class="all-main">
			<scrollView class="scroll" :scrollBoolean="listData.total" :scrollTop="listData.scrollTop"
				:scrollLoad="listData.total > listData.list.length" :refresherRriggered="listData.refresherRriggered"
				@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
				<!-- 工作 -->
				<view class="main-list-two" v-if="data.searchData.types === '1'">
					<view class="list-item" v-for="(item, index) in listData.listTwo" :key="index"
						@click="jumpGz(item)">
						<view class="item-title">
							<view class="item-sub-title">{{ item.positionName }}</view>
							<view class="item-money">{{ convertToK(item.salaryMin) }} - {{ convertToK(item.salaryMax) }}
							</view>
						</view>
						<view class="item-desc">{{ item.workPositionDesc }}</view>
						<view class="item-border">
							<view class="border-item">{{ setName(item.workType) }}</view>
							<view class="border-item">{{ setName1(item.workAddressType) }}</view>
						</view>
						<view class="item-info">
							<view class="info-left">
								<image :src="httpUrl+'/app/file/viewFile?fileId='+item.avatar"></image>
								<view class="name">{{ item.corporateName }} <text>·{{ item.verifyState.name }}</text>
								</view>
							</view>
							<view class="info-right">{{ item.createTime }}</view>
						</view>
					</view>
				</view>
				<!-- 人才 -->
				<view class="main-list" v-if="data.searchData.types === '2'">
					<view class="list-item" v-for="(item, index) in listData.list" :key="index" @click="jumpItem(item)">
						<view class="item-top">
							<view class="top-left">
								<image :src="httpUrl+'/app/file/viewFile?fileId='+item.avatarFileId"></image>
								<view class="left-info">
									<view class="info-name">{{ item.name }}</view>
									<view class="info-num">{{ item.gender.name }} | {{ item.age }}</view>
								</view>
							</view>
							<view class="top-right" @click.stop="jump(item)">打招呼</view>
						</view>
						<view class="item-desc">{{ item.introduction }}</view>
						<view class="item-zw">期望职位: {{ item.positionName }}</view>
						<view class="item-border">
							<view class="border-item" v-for="(v, ind) in item.border" :key="ind">{{ v.name }}</view>
						</view>
					</view>
				</view>
			</scrollView>
		</view>
		<!-- 区域选择 -->
		<areaSelect ref='areaChoose' @confirm='areaConfirm'></areaSelect>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getStatusBarHeight
	} from '@/utils/common/common.js'
	import areaSelect from '@/components/area-choose/area-choose.vue'
	import scrollView from "@/components/scrollView.vue";
	import {
		convertToK
	} from '@/utils/common/common.js'
	import api from '@/utils/api/recruit.js'
	import {
		setDialogView
	} from '@/utils/dialogView.ts'
	onLoad(res => {
		if (res.data) {
			data.searchData = JSON.parse(res.data)
		}
		barHeight.value = getStatusBarHeight()
	})
	const httpUrl = getApp().globalData.baseUrl
	onMounted(_ => {
		if (data.searchData.types === '1') {
			listData.listTwo = []
			getAllList()
		} else {
			listData.list = []
			getList()
		}
		// getLocation()
	})
	const info = uni.getSystemInfoSync();
	// 搜索信息
	const data = reactive({
		searchData: {},
		navList: [{
				name: '全部'
			},
			{
				name: '线上'
			},
			{
				name: '线下'
			},
			{
				name: '兼职'
			},
			{
				name: '全职'
			},
		]
	})
	const setName = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'FULL_TIME':
				return '全职';
			case 'PART_TIME_JOB':
				return '兼职';
			default:
				return '未知';
		}
	}
	const setName1 = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'OFFLINE':
				return '线下';
			case 'ONLINE':
				return '线上';
			default:
				return '未知';
		}
	}
	const barHeight = ref(null)
	const searchValue = ref(null)
	const plTitle = ref('搜索职位名称')
	const navIndex = ref(0) //筛选下标
	const areaChoose = ref(null) // 区域组件
	// 列表数据
	const listData = reactive({
		total: 20, //	总条数
		scrollTop: 0, //	滚动区域
		refresherRriggered: false, //	下拉状态
		pageInfo: {
			pageNo: 1,
			pageSize: 10
		},
		list: [],
		listTwo: []
	})
	const jumpNav = index => {
		navIndex.value = index
		listData.pageInfo.expectWorkType = index === 1 ? 'ONLINE' : index === 2 ? 'OFFLINE' : ''
		listData.pageInfo.positionType = index === 3 ? 'PART_TIME_JOB' : index === 4 ? 'FULL_TIME' : ''
		listData.pageInfo.pageNo = 1
		listData.pageInfo.pageSize = 10
		if (data.searchData.types === '1') {
			listData.listTwo = []
			getAllList()
		} else {
			listData.list = []
			getList()
		}
	}
	// 打开区域选择
	const open = _ => {
		areaChoose.value.show()
	}
	// 区域确定
	const areaConfirm = val => {
		listData.pageInfo.workProvince = val.addressList[0]
		listData.pageInfo.workCity = val.addressList[1]
		listData.pageInfo.workDistrict = val.addressList[2]
		listData.pageInfo.pageNo = 1
		listData.pageInfo.pageSize = 10
		if (data.searchData.types === 1) {
			listData.listTwo = []
			getAllList()
		} else {
			listData.list = []
			getList()
		}
	}
	// 刷新
	const refresherrefresh = _ => {
		listData.refresherRriggered = true;
		listData.listTwo = [];
		listData.list = []
		listData.pageInfo.pageNo = 1
		listData.pageInfo.pageSize = 10
		data.searchData.types === '1' ? getAllList() : getList();
	}
	// 触底事件
	const scrolltolower = _ => {
		if (data.searchData.types === '1') {
			if (listData.listTwo.length >= listData.total) return false;
			listData.pageInfo.pageNo++;
			getAllList();
		} else {
			if (listData.list.length >= listData.total) return false;
			listData.pageInfo.pageNo++;
			getList();
		}
	}
	const getLocation = () => {
		setDialogView('ACCESS_FINE_LOCATION').then((res) => {
			if (res == 1) {
				uni.getLocation({
					type: 'wgs84', // 默认使用 wgs84 坐标系
					success: (res) => {
						// 获取成功时返回经纬度
						listData.pageInfo.latitude = res.latitude;
						listData.pageInfo.longitude = res.longitude;
					},
					fail: (err) => {
						console.error('获取经纬度失败', err);
					}
				});
			}
		})

	}
	// 获取列表
	const getList = async _ => {
		listData.pageInfo.latitude = listData.pageInfo.latitude ? listData.pageInfo.latitude : 0;
		listData.pageInfo.longitude = listData.pageInfo.longitude ? listData.pageInfo.longitude : 0;
		if (data.searchData.positionId && data.searchData.positionName) {
			listData.pageInfo.positionId = data.searchData.positionId || ''
		} else {
			listData.pageInfo.positionName = data.searchData.positionName || ''
		}
		const res = await api.getAllResume(listData.pageInfo)
		listData.list = listData.list.concat(res.data.list);
		listData.total = res.data.total;
		listData.refresherRriggered = false;
	}
	// 获取全职职位列表
	const getAllList = async _ => {
		if (data.searchData.positionId && data.searchData.positionName) {
			listData.pageInfo.positionId = data.searchData.positionId || ''
		} else {
			listData.pageInfo.positionName = data.searchData.positionName || ''
		}
		listData.pageInfo.queryType = 'RECOMMEND'
		const res = await api.queryAllPosition(listData.pageInfo)
		listData.listTwo = listData.list.concat(res.data.list);
		listData.total = res.data.total;
		listData.refresherRriggered = false;
	}
	const search = _ => {
		uni.navigateTo({
			url: '/pages/searchPosition/searchPosition?type=' + data.searchData.types
		})
	}
	// 打招呼
	const jump = async item => {
		await getApp().globalData.getUserInfo()
		let id = `C2C${item.userId}`
		uni.setStorageSync('qzId', item.userId)
		uni.navigateTo({
			url: `/pages/TUIKit/components/TUIChat/index?conversationID=${id}&userId=${item.userId}&messageType=${'boss'}`
		})
	}
	// 简历详情
	const jumpItem = item => {
		uni.navigateTo({
			url: '/pages/recruit/detail?id=' + item.userId
		})
	}
	// 职位详情
	const jumpGz = item => {
		uni.navigateTo({
			url: `/pages/jobHunting/jobDetail?data=${JSON.stringify(item)}`
		})
	}
	// 返回
	const goto = _ => uni.navigateBack()
</script>

<style lang="scss" scoped>
	#app {
		background: #F4F6FA !important;
	}

	.all-container {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background: #F4F6FA !important;

		// background: #fff;
		.all-head {
			padding: 0 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			.search-ipt {
				background: #F4F6FA;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				border: 2rpx solid #F4F6FA;
				padding: 16rpx 34rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				width: 92%;

				image {
					width: 42rpx;
					height: 42rpx;
				}

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #BFBFBF;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 4rpx;
				}
			}
		}

		.head-bt {
			width: 750rpx;
			// height: 98rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 32rpx;
			box-sizing: border-box;

			.bt-nav {
				display: flex;
				align-items: center;

				.nav-item {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #595959;
					// line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin: 0 10rpx;
				}

				.nav-item-active {
					color: #6B64D3;
					font-weight: bold;
				}
			}

			.bt-region {
				display: flex;
				align-items: center;

				text {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #262626;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.all-main {
			height: calc(100% - 180rpx);
			padding: 0 24rpx;
			box-sizing: border-box;

			.scroll {
				height: 100%;

				.main-list {
					padding: 24rpx;
					box-sizing: border-box;
					height: 100%;

					.list-item {
						background: #FFFFFF;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						padding: 24rpx;
						box-sizing: border-box;
						margin-bottom: 24rpx;

						.item-top {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.top-left {
								display: flex;
								align-items: center;

								image {
									width: 64rpx;
									height: 64rpx !important;
									border-radius: 50%;
									object-fit: cover;
								}

								.left-info {
									margin-left: 17rpx;

									.info-name {
										font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
										font-weight: normal;
										font-size: 32rpx;
										color: #262626;
										line-height: 48rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}

									.info-num {
										font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
										font-weight: normal;
										font-size: 28rpx;
										color: #595959;
										line-height: 42rpx;
										text-align: center;
										font-style: normal;
										text-transform: none;
										margin-top: 8rpx;
									}
								}
							}

							.top-right {
								padding: 13rpx 11rpx;
								box-sizing: border-box;
								border-radius: 32rpx 32rpx 32rpx 32rpx;
								border: 1rpx solid #6B64D3;
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #6B64D3;
								line-height: 42rpx;
								text-align: center;
								font-style: normal;
								text-transform: none;
							}
						}

						.item-desc {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #262626;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-top: 24rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.item-qw {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #262626;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-top: 16rpx;
						}

						.item-border {
							margin-top: 24rpx;
							display: flex;
							align-items: center;

							.border-item {
								padding: 6rpx 16rpx;
								background: #F4F6FA;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 24rpx;
								color: #8C8C8C;
								line-height: 36rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-right: 12rpx;
							}
						}
					}
				}

				.main-list-two {
					width: 100%;
					height: 100%;

					.list-item {
						padding: 24rpx;
						box-sizing: border-box;
						background: #FFFFFF;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						margin-top: 24rpx;

						.item-title {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.item-sub-title {
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 36rpx;
								color: #262626;
								line-height: 54rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}

							.item-money {
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 32rpx;
								color: #6B64D3;
								line-height: 48rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}

						.item-desc {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #262626;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-top: 16rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.item-border {
							display: flex;
							align-items: center;
							margin-top: 16rpx;

							.border-item {
								padding: 6rpx 16rpx;
								box-sizing: border-box;
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 24rpx;
								color: #8C8C8C;
								line-height: 36rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								background: #F4F6FA;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								margin-right: 10rpx;
							}
						}

						.item-info {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 24rpx;

							.info-left {
								display: flex;
								align-items: center;
								width: 50%;

								image {
									width: 48rpx;
									height: 48rpx;
									border-radius: 50%;
									flex-shrink: 0;
								}

								.name {
									font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
									font-weight: normal;
									font-size: 28rpx;
									color: #000000;
									line-height: 42rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									margin-left: 12rpx;
								}
							}

							.info-right {
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #8C8C8C;
								line-height: 42rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}
					}
				}
			}
		}
	}
</style>